<template>
     <el-form :inline="true" :model="selectData" class="demo-form-inline">
    <el-form-item label="姓名">
      <el-input v-model="selectData.nickName" placeholder="请输入姓名" />
    </el-form-item>
    <el-form-item label="角色">
     <el-select v-model="selectData.role" class="select-box" placeholder="请选择" size="small">
     <el-option label="全部" :value="0" />
      <el-option
        v-for="item in roleList"
        :key="item.roleId"
        :label="item.roleName"
        :value="item.roleId"
        />
  </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="list" border style="width: 100%">
    <el-table-column prop="id" label="编号" width="180" />
    <el-table-column prop="nickName" label="姓名" width="180" />
    <el-table-column prop="role" label="角色">
      <!-- 因为角色是数组形式，所以用插槽展示 -->
      <!-- scope获取当前行相关信息 -->
    <template #default="scope">
        <el-button v-for="item in scope.row.role" :key="item.role" link size="small">
        {{item.roleName}}
        </el-button>
      </template>
    </el-table-column>
    <el-table-column prop="role" label="操作">
    <template #default="scope">
        <el-button link size="small" @click="changeUser(scope.row)">
        编辑
        </el-button>
      </template>
        </el-table-column>
  </el-table>
  <el-dialog v-model="isShow" title="编辑信息">
    <el-form :model="active">
      <el-form-item label="姓名" >
        <el-input v-model="active.nickName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="角色" >
        <el-select multiple v-model="active.role" placeholder="请选择角色">
          <el-option
        v-for="item in roleList"
        :key="item.roleId"
        :label="item.roleName"
        :value="item.roleId"
        />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="updateUser">更改</el-button>
        <el-button type="primary" @click="isShow=false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { getRoleList, getUserList } from '@/request/api';
import { InitData, ListInt } from '@/type/user';
import { da } from 'element-plus/lib/locale';
import { defineComponent, onMounted ,reactive, toRefs, watch} from 'vue'

export default defineComponent({
    setup () {
        const data=reactive(new InitData())
        onMounted(()=>{
            getUser();
            getRole()
        })
        const getUser=()=>{
            getUserList().then(res=>{
                // console.log(res);
                data.list=res.data
            })
        }
        const getRole=()=>{
          getRoleList().then(res=>{
            // console.log(res);
             data.roleList=res.data
          })
        }
        const onSubmit=()=>{
          // console.log(data.selectData.nickName);
          // console.log(data.selectData.role);
          let arr:ListInt[]=[]
          if(data.selectData.nickName||data.selectData.role){//判断两者之一是否为空 若不为空则进行下一步
          if(data.selectData.nickName){
            // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
            arr=data.list.filter((value)=>{
              // indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
              // 如果要检索的字符串值没有出现，则该方法返回 -1。
              return value.nickName.indexOf(data.selectData.nickName)!=-1
            })
            data.list=arr
          }
          if(data.selectData.role){
            arr=data.list.filter((value)=>{
          return value.role.find((item)=>item.role===data.selectData.role)
        });
            // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
            // arr=(data.selectData.nickName ? arr : data.list).filter((value)=>{
            //   // value得到的是一个对象形式
            //   return value.role.find((item)=>item.role===data.selectData.role)
            // })
          }
          }else{
            arr=data.list
          }
          data.list=arr
        }
        // 监听输入框的两个属性
        watch(
          [()=>data.selectData.nickName,()=>data.selectData.role],
          ()=>{
            if (data.selectData.nickName==""||data.selectData.role==0){
              getUser()
            }
          }
        );
        const changeUser=(row:ListInt)=>{
          // console.log(row.role);
          // data.active.role=row.role.values.role   
          // data.isShow=true
          // data.active.id=row.id,
          // data.active.nickName=row.nickName
          // data.active.role=row.role.map((value:any)=>value.role)
          data.active={
            id:row.id,
          nickName:row.nickName,
          userName:row.userName,
          role:row.role.map((value:any)=>value.role)
          }
          data.isShow=true;
        }
        const updateUser=()=>{
          console.log(data.active.id);
          let obj:any=data.list.find((value)=>value.id==data.active.id);//说明正在编辑这条信息
          // console.log(obj.nickName);
          obj.nickName=data.active.nickName;
          // //data.active.role-->[1,2]
          // //roleList-->roleId-->1,2
          obj.role=data.roleList.filter(value=>data.active.role.indexOf(value.roleId)!==-1);//判断此时选择的角色id
          // // console.log(obj.role);
          data.list.forEach((item,i)=>{
            if(item.id==obj.id){
              data.list[i]=obj
            }
          })
          data.isShow=false;
        }
        return {...toRefs(data),onSubmit,changeUser,updateUser}
    }
})
</script>

<style scoped>

</style>